<template>
	<div class="progress-bar" ref="progressBar" @click="progressClick">
		<div class="bar-inner">
			<div class="progress" ref="progress"></div>
			<div 
						class="progress-btn-wrapper" 
						ref="progressBtn"
						@touchstart.prevent="progressTouchStart"
						@touchmove.prevent="progressTouchMove"
						@touchend="progressTouchEnd"
			>
				<div class="progress-btn"></div>
			</div>
		</div>
	</div>
</template>


<script>
	import { prefixStyle } from '@/common/js/dom'


	const progressBtnWidth = 16
	const transform = prefixStyle('transform')

	export default {
		props: {
			percent: {
				type: Number,
				default: 0
			}
		},
		created() {
			// 不同回调函数里面用来共享数据
			this.touch = {}
		},
		methods: {
			progressTouchStart(e) {
				// 表示已经初始化完成
				this.touch.initiated = true
				// 横向坐标
				this.touch.startX = e.touches[0].pageX
				this.touch.left = this.$refs.progress.clientWidth

			},
			progressTouchMove(e) {
				if(!this.touch.initiated) {
					return
				}
				const deltaX  = e.touches[0].pageX - this.touch.startX
				const offsetWidth = Math.min(this.$refs.progressBar.clientWidth - progressBtnWidth, Math.max(0, this.touch.left + deltaX))
				this._offset(offsetWidth)
			},
			progressTouchEnd() {
				this.touch.initiated = false
				this._triggerPercent()
			},
			// 点击进度条，偏移到该位置
			progressClick(e) {
				const rect = this.$refs.progressBar.getBoundingClientRect()
				const offsetWidth = e.pageX - rect.left
				this._offset(offsetWidth)
				// 当我们点击progressBtn的时候。e.offsetX获取不对
				// this._offset(e.offsetX)
				this._triggerPercent()
			},
			_triggerPercent() {
				const barWidth = this.$refs.progressBar.clientWidth - progressBtnWidth
				const percent = this.$refs.progress.clientWidth / barWidth
				// 派发事件，把percent派发出去
				this.$emit('percentChange', percent)
			},
			_offset(offsetWidth){
					this.$refs.progress.style.width = `${offsetWidth}px`
					this.$refs.progressBtn.style[transform] = `translate3d(${offsetWidth}px, 0, 0)`
			}
		},
		watch: {
			percent(newPercent) {
				if(newPercent >=0 && !this.touch.initiated) {
					// 定义进度条长度
					const barWidth = this.$refs.progressBar.clientWidth - progressBtnWidth

					const offsetWidth = newPercent * barWidth
					this._offset(offsetWidth)
					// this.$refs.progress.style.width = `${offsetWidth}px`
					// this.$refs.progressBtn.style[transform] = `translate3d(${offsetWidth}px, 0, 0)`
				}
			}
		}
	}
</script>


<style lang="stylus" scoped>
	@import "~common/stylus/variable"
		
	.progress-bar
		height: 30px
		.bar-inner
			position: relative
			top: 13px
			height: 4px
			background: rgba(0, 0, 0, 0.3)
			.progress
				position: absolute
				height: 100%
				background: $color-theme
			.progress-btn-wrapper
				position: absolute
				left: -8px
				top: -13px
				width: 30px
				height: 30px
				.progress-btn
					position: relative
					top: 7px
					left: 7px
					box-sizing: border-box
					width: 16px
					height: 16px
					border: 3px solid $color-text
					border-radius: 50%
					background: $color-theme
</style>
